import React from "react";
import {CheckBox, Image, StyleSheet, Text, View} from "react-native";
import {listViewItemStyle} from "../style/listViewStyle";
import RoomAddListData from "../../../model/item/RoomAddListData";


type RoomAddListItemPropTypes = {
    avatar:string,
    name:string,
    onSelect:(v:boolean, data:RoomAddListData)=>void,
    data:RoomAddListData
}

type RoomAddListItemStateTypes = {
    select:boolean
}

export default class RoomAddListItem extends React.Component<RoomAddListItemPropTypes, RoomAddListItemStateTypes> {
    constructor(props:RoomAddListItemPropTypes, context:any) {
        super(props, context);

        this.state = {select:false};
    }

    componentDidMount(): void {
    }


    onValueChange(v:boolean){
        this.props.onSelect(v, this.props.data);
        this.setState({
            select:v
        })
    }



    render() {
        return (
                <View style={listViewItemStyle.container}>
                    <View style={roomAddStyles.checkboxContainer}>
                        <CheckBox value={this.state.select}  onValueChange={(v)=>this.onValueChange(v)}  />
                     </View>
                    <Image style={roomAddStyles.avatar}  source={{uri:this.props.avatar}} />
                    <View style={listViewItemStyle.content}>
                        <Text>{this.props.name}</Text>
                    </View>
                </View>
        );
    }
}

const roomAddStyles = StyleSheet.create({
    checkboxContainer: {
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
        margin:2
    },
    avatar:{
        width: 50,
        height: 50
    },
});
